<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GO机网管理后台</title>
    <meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge">
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/nifty.min.css" rel="stylesheet">
    <link href="../css/demo/nifty-demo-icons.min.css" rel="stylesheet">
    <link href="../plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="../css/user_defined.css" rel="stylesheet">
    <link href="../plugins/pace/pace.min.css" rel="stylesheet">
    <script src="../plugins/pace/pace.min.js?2016/8/5"></script>
    <style>
        .sl{
            text-overflow:ellipsis;
            white-space:nowrap;
            overflow:hidden;
            min-width: 120px;
        }
    </style>
</head>

<!--TIPS-->
<!--You may remove all ID or Class names which contain "demo-", they are only used for demonstration. -->

<body style="display: none" id="main">
<div id="container" class="effect mainnav-lg">

    <!--NAVBAR-->
    <!--===================================================-->
    <header id="navbar">
        <div id="navbar-container" class="boxed">

            <!--Brand logo & name-->
            <!--================================-->
            <div class="navbar-header">
                <a href="index.html" class="navbar-brand">
                    <!--<img src="img/logo.png" alt="Nifty Logo" class="brand-icon">-->
                    <div class="brand-title">
                        <span class="brand-text">logo</span>
                    </div>
                </a>
            </div>
            <!--================================-->
            <!--End brand logo & name-->


            <!--Navbar Dropdown-->
            <!--================================-->
            <div class="navbar-content clearfix">
                <ul class="nav navbar-top-links pull-left">

                    <!--Navigation toogle button-->
                    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                    <li class="tgl-menu-btn">
                        <a class="mainnav-toggle" href="#">
                            <i class="pli-view-list"></i>
                        </a>
                    </li>
                    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                    <!--End Navigation toogle button-->


                </ul>
                <ul class="nav navbar-top-links pull-right">

                    <!--User dropdown-->
                    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                    <li id="dropdown-user" class="dropdown">
                        <a href="#" data-toggle="dropdown" class="dropdown-toggle text-right">
                                <span class="pull-right">
                                    <img class="img-circle img-user media-object" src="../img/av1.png"
                                         alt="Profile Picture">
                                </span>

                            <div id="nav_loginInfo" class="username hidden-xs">admin</div>
                        </a>


                        <div class="dropdown-menu dropdown-menu-md dropdown-menu-right panel-default">

                            <!-- User dropdown menu -->
                            <ul class="head-list">
                                <li id="nav-logout">
                                    <a href="#">
                                        <i class="pli-computer-secure icon-lg icon-fw"></i> Lock screen
                                    </a>
                                </li>
                            </ul>

                            <!-- Dropdown footer -->
                            <div class="pad-all text-right">
                                <a href="login.html" class="btn btn-primary">
                                    <i class="pli-unlock"></i> Logout
                                </a>
                            </div>
                        </div>
                    </li>
                    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                    <!--End user dropdown-->

                </ul>
            </div>
            <!--================================-->
            <!--End Navbar Dropdown-->

        </div>
    </header>
    <!--===================================================-->
    <!--END NAVBAR-->

    <div class="boxed">

        <!--CONTENT CONTAINER-->
        <!--===================================================-->
        <div id="content-container">

            <!--Page Title-->
            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
            <div id="page-title">
                <h1 class="page-header text-overflow">维修师傅</h1>
            </div>
            <!--End page title-->


            <!--Page content-->
            <!--===================================================-->
            <div id="page-content">
                <div id="page-wrapper">
                    <button class="btn btn-default" data-toggle="modal" data-target="#add_master" @click="add()">添加维修师傅</button>

                    <div style="height: 20px"></div>



                    <div class="col-sm-3 pointer" v-for="list in master.list" @click="editInfo(list.admin_id)">
                        <div class="panel">
                            <div class="panel-body">
                                <h4 class="text-center text-info" v-text="list.name"></h4>
                                <h3 class="text-center" v-text="list.address"></h3>
                                <p class="mar-top">
                                     <span class="col-sm-5 text-right">
                                        手机号：
                                    </span>
                                    <span class="text-left" v-text="list.phone">

                                    </span>
                                </p>
                                <p class="mar-top sl">
                                     <span class="col-sm-5 text-right">
                                        身份证号：
                                    </span>
                                    <span class="text-left" v-text="list.id_card">

                                    </span>
                                </p>
                            </div>
                        </div>
                    </div>


                </div>
            </div>
            <!--===================================================-->
            <!--End page content-->


        </div>

        <nav id="mainnav-container">

        </nav>

    </div>


    <!-- FOOTER -->
    <!--===================================================-->
    <footer id="footer" style="padding-left:0 !important; text-align:center !important;">

        <!-- Visible when footer positions are fixed -->
        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
        <div class="show-fixed pull-right">
            <ul class="footer-list list-inline">
                <li>
                    <p class="text-sm">SEO Proggres</p>

                    <div class="progress progress-sm progress-light-base">
                        <div style="width: 80%" class="progress-bar progress-bar-danger"></div>
                    </div>
                </li>

                <li>
                    <p class="text-sm">Online Tutorial</p>

                    <div class="progress progress-sm progress-light-base">
                        <div style="width: 80%" class="progress-bar progress-bar-primary"></div>
                    </div>
                </li>
                <li>
                    <button class="btn btn-sm btn-dark btn-active-success">Checkout</button>
                </li>
            </ul>
        </div>


        <!-- Visible when footer positions are static -->
        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
        <div class="hide-fixed pull-right pad-rgt hide">Currently v2.4.1</div>


        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
        <!-- Remove the class name "show-fixed" and "hide-fixed" to make the content always appears. -->
        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->

        <p class="pad-lft">Copyright &#0169; 2014-2016  YIHOU  Inc.  All  Rights  Reserved</p>


    </footer>
    <!--===================================================-->
    <!-- END FOOTER -->


    <!-- SCROLL TOP BUTTON -->
    <!--===================================================-->
    <button id="scroll-top" class="btn"><i class="fa fa-chevron-up"></i></button>
    <!--===================================================-->


    <!--添加维修师傅modal-->
    <div class="modal fade" id="add_master" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="title">添加师傅</h4>
                </div>
                <div class="modal-body">

                    <form class="form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-3 control-label" for="">姓名</label>
                            <div class="col-sm-6">
                                <input type="text" placeholder="" class="form-control input-sm" id="name">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label" for="">手机号</label>
                            <div class="col-sm-6">
                                <input type="text" placeholder="" class="form-control input-sm" id="phone">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label" for="">身份证号</label>
                            <div class="col-sm-6">
                                <input type="text" placeholder="" class="form-control input-sm" id="id_card">
                            </div>
                        </div>


                        <div class="form-group" style="width: 70%;margin: 10px auto">
                            <select class="col-sm-4 form-control" style="width: 33%" id="province" v-model="province" v-on:change="showCity()">
                                <option v-for="list in province_list" v-bind:value="list.id" v-text="list.name">

                                </option>
                            </select>
                            <select class="col-sm-4 form-control" style="width: 33%" id="city" v-model="city" v-on:change="showArea()">
                                <option v-for="list in city_list" v-bind:value="list.id" v-text="list.name">

                                </option>
                            </select>
                            <select class="col-sm-4 form-control" style="width: 33%" id="area_id" v-model="area_id">
                                <option v-for="list in area_id_list" v-bind:value="list.id" v-text="list.name">

                                </option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label" for="">备注信息</label>
                            <div class="col-sm-6">
                                <input type="text" placeholder="" class="form-control input-sm" id="remark">
                            </div>
                        </div>

                        <div class="login-msg error" id="error2">
                            <i class="fa fa-warning"></i>
                            <p class="error"></p>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" id="del" v-show="is_alert==1">删除</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="add_master_">确定添加</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>

    <!--end 添加维修师傅 modal-->

</div>
<script src="../js/jquery-2.2.1.min.js"></script>
<script src="../js/left_menu.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../plugins/fast-click/fastclick.min.js"></script>
<script src="../js/nifty.min.js?2016/8/5"></script>
<script src="../plugins/sparkline/jquery.sparkline.min.js"></script>
<script src="../plugins/vue/vue.min.js"></script>
<script>
    var master_list_info;
    var admin_id;
    var vue = new Vue({
        el:'#main',
        data:{
            master:'',
            province:'',
            province_list:'',
            city:'',
            city_list:'',
            area_id:'',
            area_id_list:'',
            is_alert:''
        },
        methods:{
            'showMaster':function(){
                var that = this;
                $.post('../index/admin.php?m=Admin&c=Admin&a=getServicemanList',{page:1,count:8},function(res){
                    if(res.code==200){
                        master_list_info = JSON.stringify(res.data);
                        that.master = res.data;
                    }
                },'json');
            },
            'showProvince':function(){
                var that = this;
                $.post('../index/admin.php?m=Admin&c=Address&a=getAddress&type=province',{},function(res){
                    if(res.code==200){
                        that.province_list = res.data;
                    }
                },'json');
            },
            'showCity':function(){
                var that = this;
                var data = {};
                data.kid = this.province;
                $.post('../index/admin.php?m=Admin&c=Address&a=getAddress&type=city',data,function(res){
                    if(res.code==200){
                        that.city_list = res.data;
                    }
                },'json');
            },
            'showArea':function(){
                var that = this;
                var data = {};
                data.kid = this.city;
                $.post('../index/admin.php?m=Admin&c=Address&a=getAddress&type=area',data,function(res){
                    if(res.code==200){
                        that.area_id_list = res.data;
                    }
                },'json');
            },
            //编辑信息
            'editInfo':function(id){
                var arr;
                var json = JSON.parse(master_list_info);
                for(var i in json.list){
                    if(json.list[i].admin_id == id){
                        arr = json.list[i];
                    }
                }
                $('#add_master_').text('确认编辑');
                $('#title').text('编辑维修师傅');
                admin_id = id;
                this.is_alert = 1;
                $('#add_master').modal('show');
                $('#name').val(arr.name);
                $('#phone').val(arr.phone);
                $('#id_card').val(arr.id_card);
                $('#password').val(arr.remark);
            },
            'add':function(){
                $('#title').text('添加维修师傅');
                $('#add_master_').text('确认添加');
            }
        },
        ready:function(){
            this.showMaster();
            this.showProvince();
        }
    });


    //添加师傅
    $('#add_master_').click(function(){
        var $errorDemo = $('#error2');
        var saveData = {};
        var postUrl = '../index/admin.php?m=Admin&c=Admin&a=addServiceman';
        if(admin_id){
            postUrl = '../index/admin.php?m=Admin&c=Admin&a=updateServiceman';
            saveData.admin_id = admin_id;
        }
        saveData.phone = $('#phone').val();
        saveData.id_card = $('#id_card').val();
        saveData.password = $('#password').val();
        saveData.area_id = $('#area_id').val();
        saveData.remark = $('#remark').val();

        saveData.name = $('#name').val();
        if(!saveData.name){
            showError($errorDemo,'请输入姓名');
            return false;
        }

//        if(saveData.password.length<6){
//            showError($errorDemo,'密码不能少于6位');
//            return false;
//        }

        if(!isCardNo(saveData.id_card)){
            showError($errorDemo,'请输入正确的身份号');
            return false;
        }

        if(!checkPhone(saveData.phone)){
            showError($errorDemo,'请输入正确的手机号');
            return false;
        }

        if(!saveData.area_id){
            showError($errorDemo,'请选择区域');
            return false;
        }

        $.post(postUrl,saveData,function(res){
            if(res.code==200){
                vue.showMaster();
                $('#add_master').modal('hide');
                admin_id = '';
                vue.is_alert = '';
            }else{
                showError($errorDemo,res.message);
            }
        },'json');

    });

    //删除师傅信息
    $('#del').click(function(){
        var saveData = {};
        var postUrl = '../index/admin.php?m=Admin&c=Admin&a=updateServiceman';
        if(admin_id){
            saveData.is_del = 1;
            saveData.admin_id = admin_id;
        }
        $.post(postUrl,saveData,function(res){
            if(res.code==200){
                vue.showMaster();
                alert('删除成功！');
                $('#add_master').modal('hide');
                admin_id = '';
            }else{
                alert(res.message)
            }
        },'json');
    });

    function isCardNo(card)
    {
        // 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
        var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
        if(reg.test(card) === false)
        {
            return  false;
        }else{
            return true;
        }
    }

    function checkPhone(phone){
        if(!(/^1[34578]\d{9}$/.test(phone))){
            return false;
        }
        return true;
    }


    function showError(demo,text){
        demo.show().find('p').text(text);
    }
</script>
</body>
</html>
